<template>
    <div v-if="currencyListStatus == 'error'">
        <component-page-loading :status="currencyListStatus" @reload="getCurrencyList"></component-page-loading>
    </div>
    <el-select v-else :placeholder="placeholder || $t('game.setting.currency.name')"
               :multiple="multiple" :collapse-tags="collapseTags" :filterable="filterable"
               :size="size" :clearable="clearable" v-model="dataCache.currency" @change="filterChange">
        <el-option v-for="(item,index) in currencyList" :key="index" :label="item.currency" :value="item.currency"></el-option>
    </el-select>
</template>

<script>
export default {
    name: "PageOptionCurrency",
    model: {
        prop: 'currency',
        event: 'change'
    },
    props: {
        size: {
            type: String,
            default: null
        },
        currency: {
            type: [String, Array],
            default: null
        },
        multiple: {
            type: Boolean,
            default: true
        },
        collapseTags: {
            type: Boolean,
            default: true
        },
        filterable: {
            type: Boolean,
            default: true
        },
        clearable: {
            type: Boolean,
            default: true
        },
        placeholder: String
    },
    data() {
        return {
            currencyListStatus: 'dle',
            currencyList: [],
            dataCache: {
                currency: null,
            },
        }
    },
    watch: {
        // 外部改变数据
        currency: {
            immediate: true,
            handler: function (n, o) {
                if (n != o) {
                    this.dataCache.currency = n;
                }
            }
        }
    },
    created() {
        // 获取币种数据
        this.getCurrencyList();
    },
    methods: {
        // 获取币种数据
        getCurrencyList() {
            this.currencyListStatus = 'loading';
            axios.get('/common/getCurrencyList').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.currencyList = response.data.resp_data;
                    this.currencyListStatus = !this.currencyList.length ? 'nodata' : 'dle';
                } else {
                    this.currencyListStatus = 'error';
                }
            })
        },
        // 点击选中数据
        filterChange(currency) {
            // 对外广播事件
            this.$emit('change', currency || null);
        },
    },
}
</script>

<style scoped>

</style>
